﻿<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <style type="text/css">
        table{
            border:1px;
            border-collapse:collapse;
            border-style:solid;
            border-color:#ffffff
            font-size:12px;
            width:500px;
        }
        table td {
            border:1px;
            border-collapse:collapse;
            border-style:solid;
            border-color:#00ffff;
        }
    </style>
</head>
<body>
    <hl><center>HTML5表单示例</center></hl>
    <hr width="500" align="center">
    <form name="foeml">
        <table align="center">
            <tr>
                <td>用户名</td>
                <td><input name="username" id="username" type="text" required /></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input name="pwd" id="pwd" type="password" required /></td>
            </tr>
            <tr>
                <td>密码确认</td>
                <td><input name="pwd2" id="pwd2" type="password" required /></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input name="age" id="age" type="number" min="0" max="100" /></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>
                    <input type="birthday" id="birthday" type="date" />
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td>
                    <select name="dagree" id="degree">
                        <option value="0" selected>---请选择---</option>
                        <option value="1">初中</option>
                        <option value="2">高中</option>
                        <option value="3">大学</option>
                        <option value="4">研究生</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input name="email" id="email" type="email" required /></td>
            </tr>
            <tr>
                <td>个人主页</td>
                <td><input name="url" id="url" type="url" /></td>
            </tr>
            <tr>
                <td>用户头像</td>
                <td>
                    <input type="file" name="pic" id="pic">
                </td>
            </tr>
            <tr>
                <td>当前时间</td>
                <td><input type="datetime-local" name="currenttime" id="currenttime"></td>
            </tr>
            <tr>
                <td>喜欢颜色</td>
                <td><input type="color" name="likecolor" id="likecolor"></td>
            </tr>
            <tr>
                <td>入学成绩</td>
                <td>
                    <input type="range" name="ruxuecenji" id="ruxuecenji" max=1000 min=10 step=1 value=511 onchange="document.getElementById('show').innerHTML=value">
                    <span id="show"></span>
                </td>
            </tr>
            <tr align="center">
                <td colspan="2" >
                    <input type="subimt" class="button" value="注&nbsp;&nbsp;册" size="20">&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" class="reset" value="清&nbsp;&nbsp;除" size="20">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>